<template>
  <div class="menu_bar flex-middle">
    <div class="menu_item flex1" v-for="m in menus" :key="m.txt">
      <img class="icon" :src="require(`../${m.icon}`)" alt />
      <p class="txt">{{m.txt}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
          {icon:'assets/logo.png',txt:'每日推荐'},
          {icon:'assets/logo.png',txt:'歌单'},
          {icon:'assets/logo.png',txt:'排行榜'},
          {icon:'assets/logo.png',txt:'电台'},
          {icon:'assets/logo.png',txt:'直播'},
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.menu_bar {
  padding: 20px 0;
}
.icon {
  display: block;
  height: 43px;
  width: 43px;
  background: no-repeat center/100%;
  border-radius: 25px;
  margin: 0 auto;
}
.txt {
  margin-top: 5px;
  color: $senColor;
  font-size: 14px;
  text-align: center;
}
</style>